import React, {Component, Fragment} from 'react'
import {toBadge, toText} from "services/order"
import Debounce from 'lodash-decorators/debounce'
import Bind from 'lodash-decorators/bind'
import {connect} from 'dva'
import {updateOrder} from 'utils/tabs'
import {
  Avatar, Badge, Button, Card, Col, Divider, Dropdown, Form, Icon, Input, Menu, message, Modal, Row, Select,
  Steps, Table,
} from 'antd'
import classNames from 'classnames'
import DescriptionList from 'components/DescriptionList'
import PageHeaderWrapper from 'components/PageHeaderWrapper'
import styles from './OrderDetail.less'
import {queryArray} from "utils"
import {Link} from 'react-router-dom'

const {Step} = Steps
const {Option} = Select
const {Description} = DescriptionList
const ButtonGroup = Button.Group
const FormItem = Form.Item
const {confirm} = Modal

const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth

const menu = (data, onMenuClick, canceled) => (
  <Menu>
    <Menu.Item disabled={canceled} onClick={() => onMenuClick('edit', {data})}><Link to={'/orderForm/' + data.id}>编辑</Link></Menu.Item>
    <Menu.Item onClick={() => onMenuClick('refresh')}>刷新</Menu.Item>
  </Menu>
)

const getButton = (disabled, text, onClick) => <Button disabled={disabled} onClick={() => onClick()}
                                                       type="primary">{text}</Button>

const getMainButton = (data, canceled, callback) => {
  const {status} = data

  switch (status) {
    case 2:
    case 3:
    case 9:
      return getButton(canceled, '审核通过', () => callback('passAudit'))
    case 4:
      return getButton(canceled, '已发货', () => callback('delivered'))
    case 5:
      return getButton(canceled, '已签收', () => callback('signed'))
    case 6:
      return getButton(canceled, '申请退货', () => callback('returned'))
    case 7:
      return getButton(canceled, '退回签收', () => callback('returnSigned'))
    case 8:
      return getButton(true, '退回签收')
    default:
      return getButton(canceled, '审核通过')
  }
}

const action = (onMenuClick, canceled, data) => (
  <Fragment>
    {
      data.status < 4 &&
      <ButtonGroup>
        <Button disabled={canceled} onClick={() => onMenuClick('canceled')}>取消</Button>
        <Button disabled={canceled} onClick={() => onMenuClick('rejectAudit')} type={'danger'}>审核拒绝</Button>
        <Dropdown overlay={menu(data, onMenuClick, canceled)} placement="bottomRight">
          <Button>
            <Icon type="ellipsis"/>
          </Button>
        </Dropdown>
      </ButtonGroup>
    }
    {
      data.status >= 4 &&
      <Button onClick={() => onMenuClick('refresh')}>刷新</Button>
    }
    {getMainButton(data, canceled, onMenuClick)}
  </Fragment>
)

const toStep = (data) => {
  const {status, orderTraceList} = data
  if (status === 9) {
    if (orderTraceList && orderTraceList.length > 1) {
      const audited = orderTraceList.filter(i => (3 === i.orderStatus || 4 === i.orderStatus))
      return audited && audited.length > 0 ? 2 : 1
    }

    return 1
  }

  // if (orderTraceList) {
  //   const exists = queryArray(orderTraceList, status, 'orderStatus')
  //   return orderTraceList.indexOf(exists)
  // }
  //
  // return 0
  let step = 0
  if (orderTraceList && orderTraceList.length > 0) {
    const reject = orderTraceList.filter(i => (3 === i.orderStatus))
    if (reject.length > 0) {
      step = 1
    }
  }

  switch (status) {
    case 2:
      step = 0
      break
    case 3:
      step = 1
      break
    case 4:
      step += 1
      break
    case 5:
      step += 2
      break
    case 6:
      step += 3
      break
    case 7:
      step += 4
      break
    case 8:
      step += 5
      break
  }

  return step
}

const pushReject = (stepList, data) => {
  const {orderTraceList} = data
  if (orderTraceList && orderTraceList.length > 0) {
    const reject = orderTraceList.filter(i => (3 === i.orderStatus))
    if (reject.length > 0) {
      const rejecter = reject[0]
      stepList.push(
        <Step title="审核拒绝" description={rejecter ? desc({
          name: rejecter.tracerName,
          time: rejecter.traceTime,
        }) : undefined}/>,
      )
    }
  }
}

const getOtherStep = (data) => {
  const {status, orderTraceList} = data
  let stepList = []

  if (status === 9) {
    /**
     * 增加审核拒绝状态
     */
    pushReject(stepList, data)

    let canceler
    if (orderTraceList.length > 0) {
      canceler = queryArray(orderTraceList, 9, 'orderStatus')
    }

    stepList.push(<Step title="已取消" description={canceler ? desc({
      name: canceler.tracerName,
      time: canceler.traceTime,
    }) : undefined}/>)
    return stepList
  }

  /**
   * 增加审核拒绝状态
   */
  pushReject(stepList, data)

  let publisher, signer, returner, returnSigner
  if (orderTraceList && orderTraceList.length > 0) {
    publisher = queryArray(orderTraceList, 5, 'orderStatus')
    signer = queryArray(orderTraceList, 6, 'orderStatus')
    returner = queryArray(orderTraceList, 7, 'orderStatus')
    returnSigner = queryArray(orderTraceList, 8, 'orderStatus')
  }

  stepList.push(<Step title="审核通过待发货" description={status >= 4 && data.auditor ? desc({
      name: data.auditor.username ? `${data.auditor.realname}(${data.auditor.username})` : data.auditor.realname,
      time: data.auditTime,
    }) : undefined}/>,
    <Step title="已发货" description={publisher ? desc({
      name: publisher.tracerName,
      time: publisher.traceTime,
    }) : undefined}/>,
    <Step title="已签收" description={signer ? desc({
      name: signer.tracerName,
      time: signer.traceTime,
    }) : undefined}/>)

  if (returner) {
    stepList.push(
      <Step title="退回中" description={returner ? desc({
        name: returner.tracerName,
        time: returner.traceTime,
      }) : undefined}/>,
      <Step title="退回签收" description={returnSigner ? desc({
        name: returnSigner.tracerName,
        time: returnSigner.traceTime,
      }) : undefined}/>,
    )
  }

  return stepList
}

const extra = (data) => (
  <Row>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>状态</div>
      <div className={styles.heading}><Badge status={toBadge(data.status)}/>{toText(data.status)}</div>
    </Col>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>订单金额</div>
      <div className={styles.heading}>¥ {(data.orderAmount || 0).toFixed(2)}</div>
    </Col>
  </Row>
)

const description = (data) => (
  <DescriptionList className={styles.headerList} size="small" col="2">
    <Description term="创建人">{data.orderEmpRealname || data.orderEmpUsername}</Description>
    <Description term="客户">{data.customerRemarkName || data.customerNickname}</Description>
    <Description term="归属运营号">{data.wxNo || data.wxId}</Description>
    <Description term="订单类型">{data.type == 0 ? '即时订单' : '后续订单'}</Description>
    <Description term="复购订单">{data.isBuyBack ? '是' : '否'}</Description>
    <Description term="下单时间">{data.ctime}</Description>
    <Description term="客户备注">{data.customerRemark}</Description>
  </DescriptionList>
)

const desc = (data) => (
  <div className={classNames(styles.textSecondary, styles.stepDescription)}>
    <Fragment>
      {data.name}
    </Fragment>
    <div>{data.time}</div>
  </div>
)

const popoverContent = (
  <div style={{width: 160}}>
    吴加号
    <span className={styles.textSecondary} style={{float: 'right'}}>
      <Badge status="default" text={<span style={{color: 'rgba(0, 0, 0, 0.45)'}}>未响应</span>}/>
    </span>
    <div className={styles.textSecondary} style={{marginTop: 4}}>
      耗时：2小时25分钟
    </div>
  </div>
)

const customDot = (dot, {status}) => dot
// status === 'process' ? (
//   <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
//     {dot}
//   </Popover>
// ) : (
//   dot
// )

const operationTabList = [
  {
    key: 'orderTrace',
    tab: '跟单信息',
  },
  {
    key: 'orderProblem',
    tab: '问题跟踪',
  },
]

const problemColumns = [
  {
    title: '问题内容',
    dataIndex: 'problemContent',
    key: 'problemContent',
  }, {
    title: '跟单时间',
    dataIndex: 'traceTime',
    key: 'traceTime',
  }, {
    title: '跟单人',
    dataIndex: 'traceName',
    key: 'traceName',
  }, {
    title: '操作',
    dataIndex: 'problemStatus',
    key: 'operation',
    render: val => val === 1 ? <Button type={'ant-btn-success'}>未解决</Button> :
      <Button className={'ant-btn-warning'}>未解决</Button>,
  }, {
    title: '处理理由',
    dataIndex: 'dealReason',
    key: 'dealReason',
  },
]

const traceColumns = [
  {
    title: '跟单内容',
    dataIndex: 'traceContent',
    key: 'traceContent',
  }, {
    title: '跟单时间',
    dataIndex: 'traceTime',
    key: 'traceTime',
  }, {
    title: '订单状态',
    dataIndex: 'orderStatus',
    key: 'orderStatus',
    render: val => toText(val),
  }, {
    title: '跟单人',
    dataIndex: 'tracerName',
    key: 'tracerName',
    render: val => val ? val : '-',
  }, {
    title: '快递单号',
    dataIndex: 'expressNum',
    key: 'updatedAt',
    render: val => val ? val : '-',
  }, {
    title: '物流信息',
    dataIndex: 'expressInfo',
    key: 'expressInfo',
    render: val => <a href="javascript:;">详情</a>,
  },
]

const productColumns = [{
  title: '编号',
  dataIndex: 'sn',
}, {
  title: '图片',
  dataIndex: 'goodsImg',
  key: 'goodsImg',
  render: val => {
    return val ? <Avatar src={val} size="large"/> : '暂无图片'
  },
}, {
  title: '名称',
  dataIndex: 'goodsName',
  key: 'goodsName',
}, {
  title: '品牌',
  dataIndex: 'brandName',
  key: 'brandName',
}, {
  title: '单价(RMB)',
  dataIndex: 'orderGoods',
  key: 'salePrice',
  width: 100,
  render: (val) => '￥ ' + val ? val.goodsPrice : '0.00',
}, {
  title: '数量',
  dataIndex: 'orderGoods',
  key: 'num',
  width: 100,
  render: (val) => val ? val.goodsNum : 0,
}, {
  title: '折扣',
  dataIndex: 'orderGoods',
  key: 'discount',
  width: 100,
  render: (val) => val ? val.goodsDiscount + '折' : '0.00',
}, {
  title: '金额小计',
  dataIndex: 'orderGoods',
  key: 'amount',
  render: val => '￥' + (val ? ((val.goodsPrice * (val.goodsDiscount / 10)) * val.goodsNum).toFixed(2) : '0.00'),
}, {
  title: '仓库',
  dataIndex: 'depotName',
}, {
  title: '库存',
  dataIndex: 'stockNum',
}]

const traceFilter = () => (
  <Fragment>

  </Fragment>
)

const statusList = (canceled, status, callback) => [
  {
    id: 'auditOnWait',
    name: '待审核',
    disabled: true,
  },
  {
    id: 'rejectAudit',
    name: '审核不通过',
    disabled: canceled || status >= 4 || false,
  },
  {
    id: 'passAudit',
    name: '审核通过待发货',
    disabled: canceled || status >= 4 || false,
  },
  {
    id: 'delivered',
    name: '已发货',
    disabled: canceled || status >= 5 || false,
  },
  {
    id: 'signed',
    name: '已签收',
    disabled: canceled || status >= 6 || false,
  },
  {
    id: 'returned',
    name: '退回中',
    disabled: canceled || status >= 7 || false,
  },
  {
    id: 'returnSigned',
    name: '退回签收',
    disabled: canceled || status >= 8 || false,
  },
  {
    id: 'canceled',
    name: '已取消',
    disabled: canceled || status >= 4 || false,
  },
]

@connect(({order, loading}) => ({
  order,
  loading: loading.effects['order/query'],
}))
class OrderDetail extends Component {
  state = {
    operationkey: 'orderTrace',
    stepDirection: 'horizontal',
    rejectAuditModalVisible: false,
    returnGoodsModalVisible: false,
  }

  componentDidMount () {
    const {dispatch, orderId} = this.props
    dispatch({type: 'order/query', payload: {orderId}})

    this.setStepDirection()
    window.addEventListener('resize', this.setStepDirection, {passive: true})
  }

  componentWillUnmount () {
    window.removeEventListener('resize', this.setStepDirection)
    this.setStepDirection.cancel()
  }

  onOperationTabChange = key => {
    this.setState({operationkey: key})
  }

  @Bind()
  @Debounce(200)
  setStepDirection () {
    const {stepDirection} = this.state
    const w = getWindowWidth()
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      })
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      })
    }
  }

  onRefresh () {
    const {dispatch, orderId} = this.props
    dispatch({type: 'order/query', payload: {orderId}}).then(() => {
      message.success("刷新成功")
    })
  }

  onMenuClick = (key, payload) => {
    const {dispatch} = this.props
    const target = this
    switch (key) {
      case 'edit':
        updateOrder(payload.data, dispatch)
        break
      case 'refresh':
        this.onRefresh()
        break
      case 'passAudit':
        confirm({
          title: '确定审核通过该订单吗?',
          okText: '确定',
          cancelText: '取消',
          onOk () {
            target.audit({pass: true, reason: '订单审核通过', ...payload})
          },
        })
        break
      case 'rejectAudit':
        this.setState({rejectAuditModalVisible: true})
        break
      case 'canceled':
        confirm({
          title: '确定取消该订单吗?',
          okText: '确定',
          cancelText: '取消',
          onOk () {
            target.orderTrace({content: '取消订单', status: 9, ...payload})
          },
        })
        break
      case 'delivered':
        confirm({
          title: '确定商品已经发货了吗?',
          okText: '确定',
          cancelText: '取消',
          onOk () {
            target.orderTrace({content: '订单已发货', status: 5, ...payload})
          },
        })
        break
      case 'signed':
        confirm({
          title: '确定客户已经收到商品了吗?',
          okText: '确定',
          cancelText: '取消',
          onOk () {
            target.orderTrace({content: '客户已签收', status: 6, ...payload})
          },
        })
        break
      case 'returned':
        this.setState({returnGoodsModalVisible: true})
        break
      case 'returnSigned':
        confirm({
          title: '确定已经收到客户退回的商品了吗?',
          okText: '确定',
          cancelText: '取消',
          onOk () {
            target.orderTrace({content: '签收客户退回商品', status: 8, ...payload})
          },
        })
        break
      default:
        console.log(key)
        break
    }
  }

  audit ({pass, reason, expressNum}) {
    const {order: {data: {id}}, dispatch} = this.props

    const payload = {
      pass,
      orderId: id,
      reason: !pass && !reason ? '审核不通过' : reason,
      expressNum,
    }

    dispatch({
      type: 'order/audit',
      payload,
    }).then(() => this.onRefresh())
  }

  orderTrace ({traceContent, content, expressNum, status}) {
    const {order: {data: {id}}, dispatch} = this.props
    const payload = {
      orderId: id,
      traceContent: traceContent || content,
      orderStatus: status,
      expressNum,
    }

    dispatch({
      type: 'order/traces',
      payload,
    }).then(() => this.onRefresh())
  }

  handleRejectModalOk () {
    const {form: {validateFields, getFieldsValue}} = this.props

    validateFields((errors) => {
      if (errors) {
        return
      }

      const {reason} = getFieldsValue()

      this.audit({pass: false, reason})

      this.setState({rejectAuditModalVisible: false})
    })
  }

  handleReturnModalOk () {
    const {form: {validateFields, getFieldsValue}} = this.props

    validateFields((errors) => {
      if (errors) {
        return
      }

      const {reason} = getFieldsValue()

      this.orderTrace({content: reason, status: 7})

      this.setState({returnGoodsModalVisible: false})
    })
  }

  handleRejectModalCancel () {
    this.setState({rejectAuditModalVisible: false})
  }

  handleReturnModalCancel () {
    this.setState({returnGoodsModalVisible: false})
  }

  submitOrderTrace () {
    const {form: {getFieldsValue}} = this.props
    const {trace} = getFieldsValue()

    if (!trace) {
      message.warn("请选择跟单类型")
      return
    }

    const target = this

    confirm({
      title: '确定提交订单跟踪信息吗?',
      okText: '确定',
      cancelText: '取消',
      onOk () {
        const {key, expressNum, traceContent} = trace

        switch (key) {
          case 'rejectAudit':
            target.audit({pass: false, content: traceContent, expressNum})
            break
          case 'passAudit':
            target.audit({pass: true, content: traceContent, expressNum})
            break
          case 'canceled':
            target.orderTrace({traceContent, expressNum, status: 9})
            break
          case 'delivered':
            target.orderTrace({traceContent, expressNum, status: 5})
            break
          case 'signed':
            target.orderTrace({traceContent, expressNum, status: 6})
            break
          case 'returned':
            target.orderTrace({traceContent, expressNum, status: 7})
            break
          case 'returnSigned':
            target.orderTrace({traceContent, expressNum, status: 8})
            break
        }
      },
    })


  }

  render () {
    const {stepDirection, operationkey, rejectAuditModalVisible, returnGoodsModalVisible} = this.state
    const {
      order: {data},
      loading,
      form: {
        getFieldDecorator,
      },
    } = this.props
    const canceled = data.status === 9 || data.status === 8
    const {goodsDetailVOS, address} = data

    const contentList = {
      orderTrace: (
        <Fragment>
          <Row gutter={24}>
            <Col span={5}>
              <FormItem labelCol={{span: 8}} wrapperCol={{span: 16}} style={{marginBottom: 12}} label="订单状态">
                {getFieldDecorator('trace.key')(
                  <Select alowClear placeholder={'请选择'} style={{width: '100%'}}>
                    {statusList(canceled, data.status, this.onMenuClick).map(item => <Option disabled={item.disabled}
                                                                                             value={item.id}>{item.name}</Option>)}
                  </Select>,
                )}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem labelCol={{span: 8}} wrapperCol={{span: 16}} style={{marginBottom: 12}} label="快递单号">
                {getFieldDecorator('trace.expressNum')(
                  <Input disabled={canceled} placeholder={'请输入'}/>,
                )}
              </FormItem>
            </Col>
            <Col span={7}>
              <FormItem labelCol={{span: 6}} wrapperCol={{span: 18}} style={{marginBottom: 12}} label="跟单内容">
                {getFieldDecorator('trace.traceContent')(
                  <Input disabled={canceled} placeholder={'请输入'}/>,
                )}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem labelCol={{span: 8}} wrapperCol={{span: 16}} style={{marginBottom: 12}}>
                <Button disabled={canceled} onClick={() => this.submitOrderTrace()} type={'primary'}>提交</Button>
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <Table
                pagination={false}
                loading={loading}
                dataSource={data.orderTraceList}
                columns={traceColumns}
              />
            </Col>
          </Row>
        </Fragment>
      ),
      orderProblem: (
        <Fragment>
          <Row gutter={24}>
            <Col span={19}>
              <FormItem labelCol={{span: 2}} wrapperCol={{span: 22}} style={{marginBottom: 12}} label="问题内容">
                <Input disabled={canceled} placeholder={'请输入'}/>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem labelCol={{span: 8}} wrapperCol={{span: 16}} style={{marginBottom: 12}}>
                <Button disabled={canceled} type={'primary'}>提交</Button>
              </FormItem>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={24}>
              <Table
                pagination={false}
                loading={loading}
                dataSource={data.orderProblemList}
                columns={problemColumns}
              />
            </Col>
          </Row>
        </Fragment>
      ),
    }

    return (
      <PageHeaderWrapper
        title={`单号：${data.sn}`}
        logo={
          <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"/>
        }
        action={action(this.onMenuClick, canceled, data)}
        content={description(data)}
        extraContent={extra(data)}
        loading={loading}
      >
        <Form>
          <Card loading={loading} title="订单状态" style={{marginBottom: 24}} bordered={false}>
            <Steps direction={stepDirection} progressDot={customDot} current={toStep(data)}>
              <Step title="待审核" description={desc({
                name: data.orderEmpUsername ? `${data.orderEmpRealname}(${data.orderEmpUsername})` : data.orderEmpRealname,
                time: data.ctime,
              })}/>
              {getOtherStep(data)}
            </Steps>
          </Card>
          <Card loading={loading} title="产品信息" style={{marginBottom: 24}} bordered={false}>
            <Table
              rowClassName={styles["editable-row"]}
              dataSource={goodsDetailVOS}
              columns={productColumns}
              pagination={false}
              size="middle"
            />
          </Card>
          <Card loading={loading} title="订单信息" style={{marginBottom: 24}} bordered={false}>
            <DescriptionList style={{marginBottom: 24}} title="支付信息">
              <Description term="订单总金额">¥ {(data.orderAmount || 0).toFixed(2)}</Description>
              <Description term="实际需付金额">¥ {(data.realityPayAmount || 0).toFixed(2)}</Description>
              <Description term="订单代收金额">¥ {(data.unreceivedAmount || 0).toFixed(2)}</Description>
              <Description term="优惠金额">¥ {(data.discountFee || 0).toFixed(2)}</Description>
              <Description term="预付方式">{data.prepayTypeName}</Description>
              <Description term="预付金额">¥ {(data.preAmount || 0).toFixed(2)}</Description>
              <Description term="附加金额">¥ {(data.extraAmount || 0).toFixed(2)}</Description>
              <Description term="获客渠道">{data.customerChannel}</Description>
              <Description term="订单备注">{data.empRemark}</Description>
            </DescriptionList>
            <Divider/>
            <DescriptionList style={{marginBottom: 24}} title="业绩信息">
              <Description term="业绩员工1">{data.awardEmp1}</Description>
              <Description term="金额">¥ {(data.awardEmp1Money || 0).toFixed(2)}</Description>
              <Description>&nbsp;</Description>
              <Description term="业绩员工2">{data.awardEmp2 || '暂无'}</Description>
              <Description term="金额">¥ {(data.awardEmp2Money || 0).toFixed(2)}</Description>
              <Description>&nbsp;</Description>
              <Description term="业绩员工3">{data.awardEmp3 || '暂无'}</Description>
              <Description term="金额">￥ {(data.awardEmp3Money || 0).toFixed(2)}</Description>
            </DescriptionList>
            <Divider/>
            <DescriptionList title="发货信息" style={{marginBottom: 24}}>
              <Description term="收货人">{address ? address.receiver : '暂无'}</Description>
              <Description term="联系电话">{address ? address.dmobile : '暂无'}</Description>
              <Description term="发货方式">{data.expressTypeName ? data.expressTypeName : '暂无'}</Description>
              <Description term="发货仓库">{data.depotName}</Description>
              <Description term="发货时间">{data.sendTime || '未发货'}</Description>
              <Description term="运费">￥ {(data.expressFee || 0).toFixed(2)}</Description>
              <Description term="收货地址">{data.addressInfo}</Description>
            </DescriptionList>
          </Card>
          <Card loading={loading}
                className={styles.tabsCard}
                bordered={false}
                tabList={operationTabList}
                onTabChange={this.onOperationTabChange}
          >
            {contentList[operationkey]}
          </Card>
          {rejectAuditModalVisible && <Modal
            title="审核拒绝"
            visible={rejectAuditModalVisible}
            onOk={() => this.handleRejectModalOk()}
            onCancel={() => this.handleRejectModalCancel()}
          >
            <FormItem labelCol={{span: 6}} wrapperCol={{span: 18}} label="审核拒绝理由">
              {getFieldDecorator('reason', {rules: [{required: true, message: '请填写拒绝理由'}]})(
                <Input placeholder={'请填写拒绝理由'}/>,
              )}
            </FormItem>
          </Modal>}
          {returnGoodsModalVisible && <Modal
            title="申请退货"
            visible={returnGoodsModalVisible}
            onOk={() => this.handleReturnModalOk()}
            onCancel={() => this.handleReturnModalCancel()}
          >
            <FormItem labelCol={{span: 4}} wrapperCol={{span: 20}} label="退货理由">
              {getFieldDecorator('reason', {rules: [{required: true, message: '请填写退货理由'}]})(
                <Input placeholder={'请填写退货理由'}/>,
              )}
            </FormItem>
          </Modal>}
        </Form>
      </PageHeaderWrapper>
    )
  }
}

export default Form.create()(OrderDetail)
